<template>
	<view class="content">
		
		<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">姓名</view>
		<view class="titleView"><input type="text" v-model="applyInfo.userName" placeholder="请输入您的姓名" /></view>

		<view style="font-size: 28rpx;margin-top: 30rpx;">性别</view>
		<view class="sexView">
			<axb-check-box :list="sexList" @change="choseSex"></axb-check-box>
		</view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">年龄</view>
		<view class="titleView"><input type="number" v-model="applyInfo.age" placeholder="请输入年龄"/></view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">现养宠数量</view>
		<view class="titleView"><input type="number" v-model="applyInfo.petNum" placeholder="请输入养宠数量"/></view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;">住房情况</view>
		<view class="sexView">
			<axb-check-box :list="houseStatusList" @change="choseHouseStatus"></axb-check-box>
		</view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;">婚姻状况</view>
		<view class="sexView">
			<axb-check-box :list="maritalStatusList" @change="choseMaritalStatus"></axb-check-box>
		</view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;">收入</view>
		<view class="sexView">
			<axb-check-box :list="earningList" @change="chooseEarning"></axb-check-box>
		</view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">职业</view>
		<view class="titleView"><input type="text" v-model="applyInfo.job" placeholder="请输入您的职业" /></view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">居住地</view>
		<view class="titleView"><input type="text" v-model="applyInfo.address" placeholder="请输入您的居住地" /></view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;">联系电话</view>
		<view class="phoneView"><input type="number" maxlength="11" v-model="applyInfo.phone" placeholder="请输入手机号码" /></view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">微信号</view>
		<view class="titleView"><input type="text" v-model="applyInfo.weixin" placeholder="请输入您的微信号" /></view>
		
		<view style="font-size: 28rpx;margin-top: 30rpx;">申请理由</view>
		<view class="contentView">
			<textarea maxlength="200" v-model="applyInfo.content" placeholder="请输入您的申请理由...(最多200字)"></textarea>
		</view>

		<view class="bottom-view">
			<button class="confirm-btn" @click="submit(applyInfo)">提交</button>
		</view>

	</view>
</template>

<script>
	import axbCheckBox from '../../components/axb-checkbox/axb-checkbox.vue'
	import choseCity from "@/components/chose-city/chose-city"
	import http from '@/api/backend.js'
	export default {
		components: {
			axbCheckBox,
			choseCity
		},
		data() {
			return {
				applyInfo: {},
				sexList: [{
						name: "男生",
						value: "1",
						checked: 0
					},
					{
						name: "女生",
						value: "2",
						checked: 0
					}
				],
				houseStatusList: [{
						name: "租房",
						value: "1",
						checked: 0
					},
					{
						name: "自有房",
						value: "2",
						checked: 0
					}
				],
				maritalStatusList: [{
						name: "未婚",
						value: "1",
						checked: 0
					},
					{
						name: "已婚",
						value: "2",
						checked: 0
					}
				],
				earningList: [{
						name: "八千以内",
						value: "1",
						checked: 0
					},
					{
						name: "八千到两万",
						value: "2",
						checked: 0
					},
					{
						name: "两万以上",
						value: "3",
						checked: 0
					}
				],
				userInfo: {}
			}
		},
		onLoad(e) {
			const userInfo = uni.getStorageSync('userInfo')
			this.userInfo = userInfo
			this.applyInfo.adoptId = e.id
			this.applyInfo.adoptUserId = e.userId
			this.applyInfo.phone = userInfo.phone
		},
		methods: {
			choseSex: function(value) {
				this.applyInfo.sex = value
			},
			choseHouseStatus: function(value) {
				this.applyInfo.houseStatus = value
			},
			choseMaritalStatus: function(value) {
				this.applyInfo.maritalStatus = value
			},
			chooseEarning: function(value) {
				this.applyInfo.earning = value
			},

			// 提交
			submit() {
				this.applyInfo.userId = this.userInfo.openId
				console.log("req", this.applyInfo)
				if(!this.paramCheck()) return
				
				http.addApplyAdopt(this.applyInfo).then(res => {
					console.log('res',res)
					if(res.success) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000
						})
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/home/index'
							});
						}, 1500)
						return;
					}
					uni.showToast({title: '重复申请', icon: 'error', duration: 2000})
				})
			},
			// 选择城市
			selectCity(item) {
				this.city = item.name
				this.petInfo.city = item.name
				this.showCity = false
			},
			closeModal() {
				this.showCity = false
			},
			paramCheck() {
				if(this.applyInfo.userId == null || this.applyInfo.userId == "") {
					uni.showToast({title: '您还未登录',icon: 'none'});
					return false
				}
				if(this.applyInfo.userName == null || this.applyInfo.userName == "") {
					uni.showToast({title: '请输入姓名',icon: 'none'});
					return false
				}
				if(this.applyInfo.sex == null || this.applyInfo.sex == "") {
					uni.showToast({title: '性别不能为空',icon: 'none'});
					return false
				}
				if(this.applyInfo.petNum == null || this.applyInfo.petNum == "") {
					uni.showToast({title: '养宠数量不能为空',icon: 'none'});
					return false
				}
				if(this.applyInfo.houseStatus == null || this.applyInfo.houseStatus == "") {
					uni.showToast({title: '请选择住房情况',icon: 'none'});
					return false
				}
				if(this.applyInfo.maritalStatus == null || this.applyInfo.maritalStatus == "") {
					uni.showToast({title: '请选择婚姻状况',icon: 'none'});
					return false
				}
				if(this.applyInfo.earning == null || this.applyInfo.earning == "") {
					uni.showToast({title: '请选择收入情况',icon: 'none'});
					return false
				}
				if(this.applyInfo.job == null || this.applyInfo.job == "") {
					uni.showToast({title: '请输入职业',icon: 'none'});
					return false
				}
				if(this.applyInfo.address == null || this.applyInfo.address == "") {
					uni.showToast({title: '请输入居住地',icon: 'none'});
					return false
				}
				if(this.applyInfo.phone == null || this.applyInfo.phone == "") {
					uni.showToast({title: '请输入手机号',icon: 'none'});
					return false
				}
				if(this.applyInfo.content == null || this.applyInfo.content == "") {
					uni.showToast({title: '请输入申请理由',icon: 'none'});
					return false
				}
				return true
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 15rpx;
	}

	.imgView {
		width: 240rpx;
		height: 240rpx;
		background-color: #f1f1f1;
		display: flex;
		border-radius: 10rpx;
		margin-top: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			align-self: center;
			margin: 0 auto;
		}
	}
	.preImage {
		margin-left: -20rpx;
		margin-top: 20rpx;
		
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
			
		}
		
		.addView {
			width: 160rpx;
			height: 160rpx;
			// background-color: #f1f1f1;
			display: flex;
			margin-left: 20rpx;
			
			image {
				width: 80rpx;
				height: 80rpx;
				align-self: center;
				margin: 0 auto;
			}
		}
	}

	.nicknameView,
	.phoneView,
	.titleView {
		margin-top: 20rpx;

		input {
			font-size: 24rpx;
		}
	}

	.typeView,
	.sexView,
	.bodyView,
	.ageView,
	.conditionView {
		margin-left: -20upx;
		margin-top: 20rpx;
	}

	.city-view {
		.city {
			display: inline-block;
			height: 50upx;
			line-height: 50upx;
			padding: 0 22upx;
			border-radius: 8upx;
			font-size: 22upx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background: #f7f7f7;
		}
	}

	.contentView {

		textarea {
			margin-top: 20rpx;
			font-size: 24rpx;
			background-color: #f8f8f8;
			width: 90%;
			margin: 0 auto;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
		}
	}

	.bottom-view {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;

		.confirm-btn {
			float: left;
			border-radius: 40rpx;
			background-color: #F8A323;
			width: 80%;
			height: 84rpx;
			line-height: 84rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
</style>
